<template>
  <el-main style="padding:10px 10px;">
    <el-form ref="editForm" :model="editForm" :rules="rules" class="yuebon-setting-form" size="medium">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="基本信息" name="first" style="margin-top:10px">
          <el-form-item label="系统名称" :label-width="formLabelWidth" prop="systemName">
            <el-input v-model="editForm.systemName" placeholder="请输入系统名称" autocomplete="off" clearable />

          </el-form-item>
          <el-form-item label="系统简介" :label-width="formLabelWidth" prop="systemIntroduction">
            <el-input v-model="editForm.systemIntroduction" placeholder="请输入系统简介" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="访问域名" :label-width="formLabelWidth" prop="domainName">
            <el-input v-model="editForm.domainName" placeholder="请输入访问域名" autocomplete="off" clearable />

          </el-form-item>
          <el-form-item label="logo" :label-width="formLabelWidth" prop="logo">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :limit="1"
              :file-list="filelist"
              :auto-upload="false"
              :on-change="Change"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="公司名称" :label-width="formLabelWidth" prop="company">
            <el-input v-model="editForm.company" placeholder="请输入公司名称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="通讯地址" :label-width="formLabelWidth" prop="adress">
            <el-input v-model="editForm.adress" placeholder="请输入通讯地址" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="editForm.phone" placeholder="请输入电话" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="Email" :label-width="formLabelWidth" prop="email">
            <el-input v-model="editForm.email" placeholder="请输入Email" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="ICP备案号" :label-width="formLabelWidth" prop="iCPRecordNum">
            <el-input v-model="editForm.icpRecordNum" placeholder="请输入ICP备案号" autocomplete="off" clearable />

          </el-form-item>
          <el-form-item label="公安备案号" :label-width="formLabelWidth" prop="psRecordNum">
            <el-input v-model="editForm.psRecordNum" placeholder="请输入公安备案号" autocomplete="off" clearable />

          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="短信设置" name="three" style="margin-top:10px">
          <el-form-item label="短信API地址" :label-width="formLabelWidth" prop="apiAdress">
            <el-input v-model="editForm.apiAdress" placeholder="请输入短信API地址" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="平台登录账户" :label-width="formLabelWidth" prop="loginUserName">
            <el-input v-model="editForm.loginUserName" placeholder="请输入平台登录账户" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="平台通信密钥" :label-width="formLabelWidth" prop="secretKey">
            <el-input v-model="editForm.secretKey" placeholder="请输入平台通信密钥" autocomplete="off" clearable />
          </el-form-item>

        </el-tab-pane>
        <el-tab-pane label="邮件设置" name="four" style="margin-top:10px">
          <el-form-item label="SMTP服务器" :label-width="formLabelWidth" prop="smtpip">
            <el-input v-model="editForm.smtpip" placeholder="请输入SMTP服务器" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="SSL加密连接" :label-width="formLabelWidth" prop="issslEncrypt">
            <el-radio-group v-model="editForm.issslEncrypt">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="SMTP端口" :label-width="formLabelWidth" prop="smtpPort">
            <el-input v-model="editForm.smtpPort" placeholder="请输入SMTP端口" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="发件人地址" :label-width="formLabelWidth" prop="sendMailAdress">
            <el-input v-model="editForm.sendMailAdress" placeholder="请输入发件人地址" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="邮箱账号" :label-width="formLabelWidth" prop="mailUserName">
            <el-input v-model="editForm.mailUserName" placeholder="请输入邮箱账号" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="邮箱密码" :label-width="formLabelWidth" prop="mailPwd">
            <el-input v-model="editForm.mailPwd" placeholder="请输入邮箱密码" type="password" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="发件人昵称" :label-width="formLabelWidth" prop="nickName">
            <el-input v-model="editForm.nickName" placeholder="请输入发件人昵称" autocomplete="off" clearable />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="文件上传" name="five" style="margin-top:10px">
          <el-form-item label="文件服务器" :label-width="formLabelWidth" prop="server">
            <el-select v-model="editForm.server" placeholder="请选择">
              <el-option label="本地服务器" value="0" />
              <el-option label="阿里云OSS" value="1" />
              <el-option label="腾讯云OSS" value="2" />
              <el-option label="七牛云" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="文件上传目录" :label-width="formLabelWidth" prop="filePath">
            <el-input v-model="editForm.filePath" placeholder="请输入文件上传目录" autocomplete="off" clearable />
          </el-form-item>

          <el-form-item label="文件上传类型" :label-width="formLabelWidth" prop="ext">
            <el-input v-model="editForm.ext" placeholder="请输入文件上传类型" autocomplete="off" clearable />
          </el-form-item>

        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" class="btnset" @click="saveEditForm">保 存</el-button>
      </el-form-item>

    </el-form>

  </el-main>
</template>

<script>
import { addConfig, getConfig } from '@/api/admin/config'
import defaultSettings from '@/settings'
export default {
  name: 'Conf',
  components: { },
  data() {
    return {
      icon: 'app',
      activeName: 'first',
      form: { icon: undefined },
      editForm: {
        systemName: '',
        systemIntroduction: '',
        domainName: '',
        logo: '',
        company: '',
        adress: '',
        phone: '',
        email: '',
        icpRecordNum: '',
        psRecordNum: '',
        apiAdress: '',
        loginUserName: '',
        secretKey: '',
        smtpip: '',
        issslEncrypt: 'true',
        smtpPort: '',
        sendMailAdress: '',
        mailPwd: '',
        mailUserName: '',
        nickName: '',

        server: 0,
        filePath: '',
        ext: ''
      },
      rules: {
        systemName: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 6 到 32 个字符', trigger: 'blur' }
        ]

      },
      dialogVisible: false,
      dialogImageUrl: '',
      filelist: [],
      formLabelWidth: '150px',
      headers: []
    }
  },
  mounted() {
    this.loadSettingData()
  },
  methods: {

    // 选择图标
    selected(name) {
      this.form.icon = name
    },

    Change(file, fileList) {
      this.editForm.logo = file
      return false
    },

    handleRemove(file, fileList) {
      this.editForm.logo = file.url
      this.filelist = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    convertValue(data) {
      if (typeof (data) === 'undefined') {
        return ''
      }
      return data
    },
    async loadSettingData() {
      const res = await getConfig()
      if (!res?.success) {
        return
      }
      this.editForm = res.data
      this.editForm.issslEncrypt = res.data.issslEncrypt.toString()
      this.editForm.server = res.data.server.toString()

      if (res.data.logo) {
        this.filelist = [{ name: res.data.logo, url: defaultSettings.host + res.data.logo }]
      }
    },
    async saveEditForm() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          const para = this.editForm
          const formData = new FormData()
          if (para.logo?.raw) {
            formData.append('file', para.logo.raw)
          } else {
            if (this.filelist[0]) {
              formData.append('fileUrl', this.filelist[0].name)
            }
          }
          formData.append('systemname', para.systemName)
          formData.append('SystemIntroduction', this.convertValue(para.systemIntroduction))
          formData.append('DomainName', this.convertValue(para.domainName))
          formData.append('Company', this.convertValue(para.company))
          formData.append('Adress', this.convertValue(para.adress))
          formData.append('Phone', this.convertValue(para.phone))
          formData.append('Email', this.convertValue(para.email))
          formData.append('ICPRecordNum', this.convertValue(para.icpRecordNum))
          formData.append('PSRecordNum', this.convertValue(para.psRecordNum))
          formData.append('APIAdress', this.convertValue(para.apiAdress))
          formData.append('LoginUserName', this.convertValue(para.loginUserName))
          formData.append('SecretKey', this.convertValue(para.secretKey))
          formData.append('SMTPIP', this.convertValue(para.smtpip))
          formData.append('ISSSLEncrypt', this.convertValue(para.issslEncrypt))
          formData.append('SMTPPort', this.convertValue(para.smtpPort))
          formData.append('SendMailAdress', this.convertValue(para.sendMailAdress))
          formData.append('MailPwd', this.convertValue(para.mailPwd))
          formData.append('MailUserName', this.convertValue(para.mailUserName))
          formData.append('NickName', this.convertValue(para.nickName))
          formData.append('Server', this.convertValue(para.server))
          formData.append('Ext', this.convertValue(para.ext))
          formData.append('FilePath', this.convertValue(para.filePath))
          const config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          addConfig(formData, config).then(res => {
            if (res.success) {
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.loadSettingData()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.yuebon-setting-form .el-input{
width: 40%;
}
.yuebon-setting-form .el-select .el-input{
        width: 100%;
}
.yuebon-setting-form .btnset{
    float:right;
    margin-right: 30px;
    margin-top: 20px;
}
</style>
